<!DOCTYPE html>
<html lang="en">
<head>
  
    <title>hugo博客 :: KASUSA</title>
  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="今天我建立了我的hugo博客" />
<meta name="keywords" content="hugo2, " />
<meta name="robots" content="noodp" />
<link rel="canonical" href="/post/hello/" />




<link rel="stylesheet" href="assets/style.css">

  <link rel="stylesheet" href="assets/red.css">






<link rel="apple-touch-icon" href="img/apple-touch-icon-192x192.png">

  <link rel="shortcut icon" href="img/favicon/red.png">



<meta name="twitter:card" content="summary" />



<meta property="og:locale" content="en" />
<meta property="og:type" content="article" />
<meta property="og:title" content="hugo博客">
<meta property="og:description" content="今天我建立了我的hugo博客" />
<meta property="og:url" content="/post/hello/" />
<meta property="og:site_name" content="KASUSA" />

  <meta property="og:image" content="https://tvax1.sinaimg.cn/large/0083vuQJgy1gqzlm00z45j30hs06z0sq.jpg">

<meta property="og:image:width" content="2048">
<meta property="og:image:height" content="1024">


  <meta property="article:published_time" content="2021-05-29 00:00:00 &#43;0000 UTC" />












</head>
<body class="red">


<div class="container headings--one-size">

  <header class="header">
  <div class="header__inner">
    <div class="header__logo">
      <a href="/">
    <div class="logo">
        KASUSA
    </div>
</a>
    </div>
    
      <div class="menu-trigger">menu</div>
    
  </div>
  
    <nav class="menu">
  <ul class="menu__inner menu__inner--desktop">
    
      
        
          <li><a href="/showcase">demo</a></li>
        
      
        
          <li><a href="/about">关于kasusa</a></li>
        
      
      
    

    
  </ul>

  <ul class="menu__inner menu__inner--mobile">
    
      
        <li><a href="/showcase">demo</a></li>
      
    
      
        <li><a href="/about">关于kasusa</a></li>
      
    
    
  </ul>
</nav>

  
</header>


  <div class="content">
    
<div class="post">
  <h1 class="post-title">
    <a href="/post/hello/">hugo博客</a></h1>
  <div class="post-meta">
    
      <span class="post-date">
        2021-05-29 
      </span>
    
    
    <span class="post-author">:: kasusa</span>
    
  </div>

  
  <span class="post-tags">
    
    #<a href="tags/%E5%8D%9A%E5%AE%A2/">博客</a>&nbsp;
    
    #<a href="tags/hugo/">hugo</a>&nbsp;
    
  </span>
  

  
    <img src="https://tvax1.sinaimg.cn/large/0083vuQJgy1gqzlm00z45j30hs06z0sq.jpg" class="post-cover" alt="hugo博客" />
  

  

  <div class="post-content"><div>
        <h3 id="剧情介绍">剧情介绍<a href="#剧情介绍" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h3>
<blockquote>
<p>今天yr在我旁边弄新的hugo主题，我感觉他的新主题真的很清新，很不错，然后markdown记录之类的确实要比转化成html再放出来更加简单。不过可定制性没有那么好也是实话。</p>
<p>这个博客对于语法高亮支持很不错。交互和动画就只能限制于模板（这个语法蛮怪的，可能以后会研究一个自己的模板）所以暂时决定把这个弄成技术类博客。</p>
<p>我终于能把我的linux小知识都搬过来了！</p>
</blockquote>
<p>//简单说一下hugo的安装和使用：</p>
<h3 id="pwershell安装hugo">pwershell安装hugo<a href="#pwershell安装hugo" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h3>
<p>choco install hugo</p>
<h3 id="创建hugo工作目录">创建hugo工作目录<a href="#创建hugo工作目录" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h3>
<p>hugo new site mysite</p>
<h3 id="进入themes文件夹并且git-pull自己用的主题">进入themes文件夹并且git pull自己用的主题<a href="#进入themes文件夹并且git-pull自己用的主题" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h3>
<p>git clone <a href="https://github.com/panr/hugo-theme-terminal.git">https://github.com/panr/hugo-theme-terminal.git</a> themes/terminal</p>
<ul>
<li><a href="https://themes.gohugo.io/">主题市场</a></li>
<li><a href="https://github.com/panr/hugo-theme-terminal/">terminal主题(我现在用的)</a></li>
</ul>
<h3 id="配置主题">配置主题<a href="#配置主题" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h3>
<p>配置主题需要根据不同的主题情况,各有不同，对于我这个主题来说我要把博客官方的 <code>config.toml</code> 粘贴到hugo项目中，并且进行了一点修改。遇到了一点坑，我在后面注释，你可以看一下。</p>
<p>toml文件：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml"><span style="color:#a6e22e">baseurl</span> = <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e">#这个要设为空，否则生成的东西css会找不到。</span>
<span style="color:#a6e22e">languageCode</span> = <span style="color:#e6db74">&#34;en-us&#34;</span>
<span style="color:#a6e22e">theme</span> = <span style="color:#e6db74">&#34;terminal&#34;</span> 
<span style="color:#75715e"># theme 原本github上提供的版本是 &#34;hugo-theme-terminal&#34;，</span>
<span style="color:#75715e"># 但是会造成编译错误，故修改</span>
<span style="color:#a6e22e">paginate</span> = <span style="color:#ae81ff">5</span>

[<span style="color:#a6e22e">params</span>]
  <span style="color:#a6e22e">contentTypeName</span> = <span style="color:#e6db74">&#34;post&#34;</span>
  <span style="color:#a6e22e">themeColor</span> = <span style="color:#e6db74">&#34;red&#34;</span> <span style="color:#75715e">#选择主题</span>
  <span style="color:#a6e22e">showMenuItems</span> = <span style="color:#ae81ff">2</span> 
  <span style="color:#75715e">#选择显示在顶部的导航链接数目，超出的会折叠。</span>
  <span style="color:#75715e">#链接具体目录可以在下面修改</span>
  <span style="color:#a6e22e">fullWidthTheme</span> = <span style="color:#66d9ef">false</span>
  <span style="color:#a6e22e">centerTheme</span> = <span style="color:#66d9ef">false</span>

[<span style="color:#a6e22e">languages</span>]
  [<span style="color:#a6e22e">languages</span>.<span style="color:#a6e22e">en</span>]
    <span style="color:#a6e22e">title</span> = <span style="color:#e6db74">&#34;KASUSA&#34;</span>
    <span style="color:#a6e22e">subtitle</span> = <span style="color:#e6db74">&#34;kasusa的技术博客&#34;</span>
    <span style="color:#a6e22e">keywords</span> = <span style="color:#e6db74">&#34;&#34;</span>
    <span style="color:#a6e22e">copyright</span> = <span style="color:#e6db74">&#34;&#34;</span>
    <span style="color:#a6e22e">menuMore</span> = <span style="color:#e6db74">&#34;展开&#34;</span>
    <span style="color:#a6e22e">readMore</span> = <span style="color:#e6db74">&#34;品读&#34;</span>
    <span style="color:#a6e22e">readOtherPosts</span> = <span style="color:#e6db74">&#34;看看别的文章
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">    [languages.en.params.logo]
</span><span style="color:#e6db74">      logoText = &#34;</span><span style="color:#a6e22e">KASUSA</span><span style="color:#e6db74">&#34;
</span><span style="color:#e6db74">      logoHomeLink = &#34;</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#e6db74">&#34;
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">    [languages.en.menu] #顶部栏条目们（不知道顺序是按照什么计算的）
</span><span style="color:#e6db74">      [[languages.en.menu.main]] #一个顶部栏条目
</span><span style="color:#e6db74">        identifier = &#34;</span><span style="color:#a6e22e">about</span><span style="color:#e6db74">&#34; #id
</span><span style="color:#e6db74">        name = &#34;</span><span style="color:#a6e22e">About_theme</span><span style="color:#e6db74">&#34; #顶部条目显示为什么文字
</span><span style="color:#e6db74">        url = &#34;</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">about</span><span style="color:#e6db74">&#34; #点击后进入什么目录
</span><span style="color:#e6db74">      [[languages.en.menu.main]]
</span><span style="color:#e6db74">        identifier = &#34;</span><span style="color:#a6e22e">showcase</span><span style="color:#e6db74">&#34;
</span><span style="color:#e6db74">        name = &#34;</span><span style="color:#a6e22e">Showcase</span><span style="color:#e6db74">&#34;
</span><span style="color:#e6db74">        url = &#34;</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">showcase</span><span style="color:#960050;background-color:#1e0010">&#34;</span>

</code></pre></div><h3 id="写博客">写博客<a href="#写博客" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h3>
<p>在 content - posts 内新建md文件，系统会用mdmd文件内容生成博客。</p>
<p>对于md文件顶部的格式有着特殊的要求，这个也是因主体而异的，具体的话就要参考你的<code>theme</code>中<code>archetypes</code>文件夹内提供的模板了。我这个主题提供的模板如下：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-md" data-lang="md">+++
title = &#34;hugo博客&#34; 
date = &#34;2021-05-29&#34;
author = &#34;kasusa&#34;
cover = &#34;https://tvax1.sinaimg.cn/...&#34;
tags = [&#34;博客&#34;, &#34;hugo&#34;]
keywords = [&#34;hugo2&#34;, &#34;&#34;]
description = &#34;今天我建立了我的hugo博客&#34;
showFullContent = false
+++
</code></pre></div><p>我感觉他已经很明白了，但是我遇到了一个坑就是日期，我打成了2021-5-29在预览的时候就会显示成00-01-00，要注意日期格式必须相同哦！</p>
<h3 id="实时预览">实时预览<a href="#实时预览" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h3>
<p><code>hugo server -t terminal -p 51000</code></p>
<p><code>-t</code>是自定义主题，<code>-p</code>是自定义端口，开启成功之后他会根据你后台文件的变化不停的刷新，你可以在</p>
<p><code>localhost:51000</code> 实时的预览。</p>
<h3 id="编译生成html">编译生成HTML<a href="#编译生成html" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h3>
<p>在你的项目的目录输入命令：<code>hugo</code></p>
<p>文件会生成在<code>public</code>文件夹。</p>
<p>然后就把public文件夹的内容上传到github即可。以后也许会考虑 <a href="https://yantree.github.io/posts/develop/2020-06-20-action-delopy-github-page/">使用action自动编译</a></p>

      </div></div>

  
  
  

  

</div>

  </div>

  
    <footer class="footer">
  <div class="footer__inner">
    
      <div class="copyright">
        <span>© 2021 Powered by <a href="http://gohugo.io">Hugo</a></span>
    
        <span>:: Theme made by <a href="https://twitter.com/panr">panr</a></span>
      </div>
  </div>
</footer>

<script src="assets/main.js"></script>
<script src="assets/prism.js"></script>







  
</div>

</body>
</html>
